{extend name="Public:centerheard" /}
{block name='body'}
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2" style="height:100%;">
    <div id="main"
         style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <main class="gallery__main ">
            <div>
                <div class=" SubpageTitle__main"><!-- react-empty: 532 -->
                    <div class="SubpageTitle__title">
                        <div><span>{$album.name}</span>
                            <i role="separator" class="gallery__separator"></i>
                            <span class="toolbar__copy">共有{$num}项</span>
                            <input id="all_num" value="{$num}" style="display: none">
                            <!--<input id="photo_url" type="hidden" value="123">-->
                            <!--<span tabindex="0" role="button" class="toolbar__copy clickable" id="copyBT">-->
                        <!--<i class="icon_copy font_icon_15"></i>&lt;!&ndash; react-text: 540 &ndash;&gt;复制相册地址&lt;!&ndash; /react-text &ndash;&gt;</span>-->
                        </div>
                    </div>
                    <a class="clickable SubpageTitle__back" href="{:url('Shop/Photos/index')}">
                        <i class="icon_go_back font_icon_15"></i><!-- react-text: 543 -->返回<!-- /react-text -->
                        <!-- react-text: 544 --> <!-- /react-text --><!-- react-text: 545 -->相册<!-- /react-text -->
                    </a>
                </div>
                <div class="toolbar__toolbar">
                    <button data-toggle="modal" data-target="#upload"><i class="icon_upload_image"></i><!-- react-text: 207 -->上传图片<!-- /react-text --></button>
                    <button data-toggle="modal" data-target="#upload_ad"><i class="icon_upload_video"></i><!-- react-text: 210 -->上传视频<!-- /react-text --></button>
                    <button id="photo_info" data-toggle="modal" data-target="#photos"><i class="icon_gallery_info"></i><!-- react-text: 735 -->相册信息<!-- /react-text --></button>
                    <button id="del_pics" data-toggle="modal" data-target="#del_photo">删除相册</button>
                    <div id="have_selected" class="toolbar__btngroup" style="display: none">
                        <button  data-toggle="modal" data-target="#del_pic">删除</button>
                        <button data-toggle="modal" data-target="#move_pic">移动到</button>
                    </div>
                    <div class="none_select toolbar__right">
                        <div class=" Input__tdmiddle Input__main toolbar__search ">
                            <div class=" Input__inputwrap Input__fullwidth ">
                                <span class="icon_search font_icon_16 Input__icon "></span>
                                <input type="text" class=" custom_scrollbar Input__input animate__startAnimate" placeholder="搜索" id="t_4" value="" onblur="search(this)" data-url="{:url('photo/index',array('id'=>$album['id']),'','')}"></div>
                        </div>
                    </div>
                </div>
                <div class="toolbar__selected toolbar__cardselected">
                    <label tabindex="0" class=" Checkbox__main ">
                        <input id="Allright" type="checkbox" value="on" onclick="check()">
                        <span class="Checkbox__icon Checkbox__checkbox">
                        <i class="icon_correct_inline"></i>
                    </span>
                        <span id="check_all" class="Checkbox__label">全选</span>
                    </label>
                </div>
                <div tabindex="0" data-noautoblur="true" class="Modal__backdrop backdrop Modal__noafter "></div>

                <div tabindex="0" data-noautoblur="true" class="Modal__backdrop backdrop Modal__noafter "></div>

                <div class="gallery__parent">
                    {volist name='list' id='vo'}
                    <div class="gallery__card gallery__children" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div id="{$vo.id}" title="" name="{$vo.name}" class=" Image__main " onclick="check1(this)">
                            {eq name='vo.is_video' value='1'}
                            <video src="{$vo.img_url}"></video>
                            {else /}
                            <img  class=" Image__absolute Image__img " src="{$vo.img_url}">
                            {/eq}
                            <input type="text" style="display: none" name="all_pic" value="{$vo.id}">
                            <a tabindex="-1" class=" Image__clickhandle Image__space " style="padding-bottom: 100%;">
                                <div title="封面" class="none_select Image__tag">
                                    <label>
                                        <input type="radio" class="Image__input" disabled="" name="undefined_checkbox" value="on">
                                        <span class="Image__taglabel">封面</span>
                                    </label>
                                </div>
                            </a>
                            <div class="Image__select" title="点击选择">
                                <i class="icon_correct_inline Image__selecticon"></i>
                            </div>
                            <div class=" text_overflow Image__title Image__hiddenTitle ">
                                <div class="animate__downFadeIn animate__startAnimate">
                                    <div class="gallery__cardphototitle">
                                        <div name="{$vo.id}" tabindex="0" style="cursor: pointer" title="{$vo.name}" class="InlineEditor__main InlineEditor__flex ">
                                            <span class="text_overflow InlineEditor__value">{$vo.name}</span>
                                            <input type="hidden" id="pic_info">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>

                <!--图片详情-->
                <!--<div id="Viewer" class="modal fade" role="dialog" aria-labelledby="myModalLabel" tabindex="0">-->
                    <!--<div class="Viewer__table">-->
                        <!--<div class="Viewer__imagewrap" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">-->
                            <!--<div class="Viewer__img Viewer__notcanplay"><img alt="" draggable="false" title="宽度: 800px 高度: 800px 帧: 1" src="//photo.yupoo.com/yt4444/5625ccda/929a63c8.jpg" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></div>-->
                            <!--<span class="Viewer__next"><i class="icon_next font_icon_15"></i></span>-->
                        <!--</div>-->
                        <!--<div class="Viewer__urlwrap">-->
                            <!--<div class="Viewer__url">-->
                                <!--<div class=" Input__tdmiddle Input__main code Viewer__input ">-->
                                    <!--<label for="t_53" class=" Input__td Input__labelwrap Input__inputlablewrap">-->
                                        <!--<span class="Input__label ">&lt;!&ndash; react-text: 3174 &ndash;&gt;图片地址&lt;!&ndash; /react-text &ndash;&gt;&lt;!&ndash; react-text: 3175 &ndash;&gt;: &lt;!&ndash; /react-text &ndash;&gt;</span>-->
                                    <!--</label>-->
                                    <!--<div class=" Input__inputwrap Input__td ">-->
                                        <!--<input style="width: 300px" type="text" class="form-control" id="t_53" readonly="" value="http://pic.yupoo.com/yt4444/5625ccda/929a63c8.jpg">-->
                                    <!--</div>-->
                                    <!--<div style="width: 50px;display: inline-block;position: relative;top: 8px">-->
                                    <!--<span tabindex="0" role="button" class="clickable"><i class="icon_copy font_icon_17"></i>&lt;!&ndash; react-text: 3181 &ndash;&gt;复制&lt;!&ndash; /react-text &ndash;&gt;</span>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--&lt;!&ndash; 图片详情 &ndash;&gt;-->
                    <!--<div class="Viewer__scroll">-->
                        <!--<div class="custom_scrollbar Viewer__infowrap">-->
                            <!--<div tabindex="0" title="点击开始编辑" class="InlineEditor__main InlineEditor__flex Viewer__editor Viewer__title ">-->
                                <!--<span class="text_overflow InlineEditor__value">pic_name</span><i class="icon_modify font_icon_12 InlineEditor__icon"></i>-->
                            <!--</div>-->
                            <!--<p class="text_overflow Viewer__albumnamewrap"><span class="Viewer__label">所属相册</span><a class="clickable text_overflow">222</a></p>-->
                            <!--<p class="Viewer__catewrap"><span class="Viewer__label">所属分类</span><a class="clickable button small text_overflow">222</a></p>-->
                            <!--<div tabindex="0" title="点击开始编辑" class="InlineEditor__main Viewer__editor Viewer__info ">-->
                                <!--<span class="text_overflow InlineEditor__value">编辑描述</span>-->
                                <!--<i class="icon_modify font_icon_12 InlineEditor__icon"></i>&lt;!&ndash; react-text: 3218 &ndash;&gt;&lt;!&ndash; /react-text &ndash;&gt;-->
                            <!--</div>-->
                            <!--<div class="Viewer__types">-->
                                <!--<div role="link" class="text_overflow Viewer__viewtype ">-->
                                    <!--&lt;!&ndash; react-text: 3221 &ndash;&gt;原图&lt;!&ndash; /react-text &ndash;&gt;&lt;!&ndash; react-text: 3222 &ndash;&gt;(800x800)&lt;!&ndash; /react-text &ndash;&gt;-->
                                <!--</div>-->
                                <!--<div role="link" class="text_overflow Viewer__viewtype Viewer__active">&lt;!&ndash; react-text: 3224 &ndash;&gt;中型图&lt;!&ndash; /react-text &ndash;&gt;&lt;!&ndash; react-text: 3225 &ndash;&gt;(500x500)&lt;!&ndash; /react-text &ndash;&gt;</div>-->
                                <!--<div role="link" class="text_overflow Viewer__viewtype ">&lt;!&ndash; react-text: 3227 &ndash;&gt;小型图&lt;!&ndash; /react-text &ndash;&gt;&lt;!&ndash; react-text: 3228 &ndash;&gt;(240x240)&lt;!&ndash; /react-text &ndash;&gt;</div>-->
                                <!--<div role="link" class="text_overflow Viewer__viewtype ">&lt;!&ndash; react-text: 3230 &ndash;&gt;缩略图&lt;!&ndash; /react-text &ndash;&gt;&lt;!&ndash; react-text: 3231 &ndash;&gt;(100x100)&lt;!&ndash; /react-text &ndash;&gt;</div>-->
                                <!--<div role="link" class="text_overflow Viewer__viewtype ">&lt;!&ndash; react-text: 3233 &ndash;&gt;方块图&lt;!&ndash; /react-text &ndash;&gt;&lt;!&ndash; react-text: 3234 &ndash;&gt;(75x75)&lt;!&ndash; /react-text &ndash;&gt;</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="Viewer__toolbar Viewer__noactive">-->
                        <!--<div role="button" title="关闭图片查看器" class="none_select Viewer__actionitem Ripple__main Ripple__overflow" data-dismiss="modal"><i class="icon_close font_icon_20"></i></div>-->
                    <!--</div>-->

                <!--</div>-->

                <!--上传图片-->
                <div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <form action="{:url('shop/photos/photo_add')}" method="post">

                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                            data-target="#myModal">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="uploadLabel">上传图片</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-inline">
                                        <div class="form-group">
                                            <label for="exampleInputEmail3">添加水印</label>
                                            <input type="text" name="code" class="form-control" id="exampleInputEmail3">
                                            <input value="{$album.id}" type="hidden" name="album_id">
                                        </div>
                                    </div>
                                    <input id="ImgUrl" name="ImgUrl" value="" style="display:none">
                                </div>
                                <form enctype="multipart/form-data">
                                    <input id="file-zh" name="file-zh[]" type="file" multiple>
                                </form>
                                <table class="gallery__input Progress__table" style="margin-top: 20px;width: 90%;margin-left: 5%">
                                    <tbody>
                                    <tr>
                                        <td class="Progress__label">使用空间：</td>
                                        <td class="Progress__progress">
                                            <div role="progressbar" class=" Progress__main">
                                                <div class="Progress__nextvalue" style="width: 3.97%;"></div>
                                                <div aria-valuenow="3.94" class="Progress__value " style="width: 3.94%;">
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!--上传视频-->
                <div class="modal fade" id="upload_ad" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <form action="{:url('shop/photos/video_add')}" method="post">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-target="#myModal">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="upload_adLabel">上传视频</h4>
                                    <input value="{$album.id}" type="hidden" name="album_id">
                                </div>
                                <input id="Video_url" name="Video_url" value="" style="display:none">
                                <form enctype="multipart/form-data">
                                    <input id="file-video" name="file-zh[]" type="file">
                                </form>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 删除图片 -->
                <div class="modal fade" id="del_pic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <form action="{:url('shop/photo/del')}" method="post">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    删除图片
                                </div>
                                <div class="modal-body" style="text-align: center">
                                    <label>是否确认删除选中的图片？</label>
                                </div>
                                <input id="del_id" name="id" style="display: none">
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">确定</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 删除相册 -->
                <div class="modal fade" id="del_photo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <form action="{:url('shop/photos/del')}" method="post">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    删除相册
                                </div>
                                <div class="modal-body" style="text-align: center">
                                    <label>是否确认删除该相册？(所有图片也会被删除)</label>
                                    <input type="hidden" name="id" value="{$album.id}">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">确定</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 相册详情 -->
                <div class="modal fade" id="photos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <form method="post" action="{:url('shop/photo/edit')}">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                            data-target="#myModal">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">相册详情</h4>
                                </div>
                                <div class="modal-body">
                                    <p style="margin: 10px 0">名称：&nbsp;&nbsp;</p>
                                    <input type="text" name="name" class="form-control" value="{$album.name}">
                                    <input type="hidden" name="id" value="{$album.id}">
                                    <p style="margin: 10px 0">描述：&nbsp;&nbsp;</p>
                                    <textarea class="form-control" name="describe" rows="3" >{$album.describe}</textarea>
                                    <p style="margin: 10px 0">分类：&nbsp;&nbsp;</p>
                                    <select class="form-control" name="group_id">
                                        {volist name='group' id='vo'}
                                        <option {:is_selected($album.group_id,$vo.id)} value="{$vo.id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                    <p style="margin: 10px 0">权限：&nbsp;&nbsp;</p>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="inlineRadio1" value="1" checked> 公开
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" id="inlineRadio2" value="0">
                                        隐藏(尽自己可见)
                                    </label>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!--移动图片-->
                <div class="modal fade" id="move_pic" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <form action="{:url('shop/photo/move')}" method="post">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                            data-target="#myModal">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title">移动图片</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-inline">
                                        <div class="form-group">
                                            <label for="exampleInputNamel2">选择相册</label>
                                            <select class="form-control" id="exampleInputNamel2" style="width: 200px" name="album_id">
                                                {volist name='album_list' id='vo'}
                                                <option value="{$vo.id}" {:is_selected($album.id,$vo.id)} >{$vo.name}</option>
                                                {/volist}
                                            </select>
                                            <input id="ImgUrl" name="ImgUrl" value="" style="display:none">
                                        </div>
                                    </div>
                                </div>
                                <div class="gallery__parent">
                                    {volist name='list' id='vo'}
                                    <div class="gallery__card gallery__children"
                                         style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                                        <div id="{$vo.id}" title="" name="{$vo.name}" class=" Image__main " onclick="check1(this)">
                                            <img alt="" class=" Image__absolute Image__img " src="{$vo.img_url}">
                                            <input type="text" style="display: none" name="all_pic" value="{$vo.id}">
                                            <a tabindex="-1" class=" Image__clickhandle Image__space " style="padding-bottom: 100%;">
                                                <div title="封面" class="none_select Image__tag">
                                                    <label>
                                                        <input type="radio" class="Image__input" disabled="" name="undefined_checkbox" value="on">
                                                        <span class="Image__taglabel">封面</span>
                                                    </label>
                                                </div>
                                            </a>
                                            <div class="Image__select" title="点击选择">
                                                <i class="icon_correct_inline Image__selecticon"></i>
                                            </div>
                                        </div>
                                    </div>
                                    {/volist}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="submit" class="btn btn-primary">确定移动</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </main>
    </div>
</div>
<style>
</style>
<script>

//    function copyArticle() {
//        const range = document.createRange();
//        range.selectNode(document.getElementById("photo_url"));
//        const selection = window.getSelection();
//        console.log(selection)
//        if(selection.rangeCount > 0) selection.removeAllRanges();
//        selection.addRange(range);
//        document.execCommand('copy');
//        console.log(selection)
//        alert("复制成功！");
//    }
//    document.getElementById('copyBT').addEventListener('click', copyArticle, false);

    var i = 0;
    var arr = new Array();
    var pics_id = [];
    arr = document.getElementsByName("all_pic");

    function check() {
        if (document.getElementById("Allright").checked) {
            i = document.getElementById("all_num").value;
            document.getElementById("check_all").innerHTML = "已选中" + i + "项";
            $(document.getElementsByClassName("Image__main")).addClass("Image__checked");
            for (var n = 0; n < arr.length; n++) {
                pics_id[n] = arr[n].value;
            }
            document.getElementById("del_pics").style = "display: none";
            document.getElementById("photo_info").style = "display: none";
            document.getElementById("have_selected").style = "display: line-block";
        } else {
            document.getElementById("check_all").innerHTML = "全选";
            $(document.getElementsByClassName("Image__main")).removeClass("Image__checked");
            i = 0;
            pics_id = []
            document.getElementById("del_pics").style = "display: line-block";
            document.getElementById("photo_info").style = "display: line-block";
            document.getElementById("have_selected").style = "display: none";
        }
        document.getElementById("del_id").value = pics_id
    }

    function check1(obj) {
        var name = $(obj).attr('name');
        var css = $(obj).attr('class');
        var id = $(obj).attr('id');
        var val = document.getElementById(id);

        if (isContains(css, "Image__checked")) {
            i--;
            $(document.getElementsByName(name)).removeClass("Image__checked");
            document.getElementById("check_all").innerHTML = "已选中" + i + "项";
            if (i == 0) {
                document.getElementById("Allright").checked = false;
                document.getElementById("check_all").innerHTML = "全选";
                document.getElementById("del_pics").style = "display: line-block";
                document.getElementById("photo_info").style = "display: line-block";
                document.getElementById("have_selected").style = "display: none"
            }
            pics_id.remove(val.id)
        } else {
            i++;
            $(document.getElementsByName(name)).addClass("Image__checked");
            document.getElementById("Allright").checked = true;
            document.getElementById("check_all").innerHTML = "已选中" + i + "项";
            document.getElementById("del_pics").style = "display: none";
            document.getElementById("photo_info").style = "display: none";
            document.getElementById("have_selected").style = "display: line-block";
            pics_id.push(val.id)
        }
        document.getElementById("del_id").value = pics_id
    }
    function check2(obj){
        var name = $(obj).attr('name');
        document.querySelector("#pic_info").value = name;
    }

    function isContains(str, substr) {
        return str.indexOf(substr) >= 0;
    }

    Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
</script>
{/block}

